<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    #canvas {
        border: 1px solid black;
        width: 800px;
        height: 600px;
        overflow: hidden;
    }

    #btns {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .active {
        background-color: red;
        color: white;
        border: 1px solid black;
    }
</style>

<body>

    <canvas id="canvas" width="800" height="600">
        Your browser does not support canvas
    </canvas>
    <br>
    <div id="btns">
        <button id="btn-bold">粗线条</button>
        <button id="btn-thin">细线条</button>
        <button id="btn-save">保存签名</button>
        <input id="color" type="color" placeholder="请选择颜色">
        <button id="btn-eraser">橡皮擦</button>
        <button id="btn-clear">清除画布</button>
    </div>

    <script>
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        ctx.lineJoin = 'round'
        ctx.linCap = 'round'
        let btnBold = document.getElementById('btn-bold')
        let btnThin = document.getElementById('btn-thin')
        let btnSave = document.getElementById('btn-save')
        let btnEraser = document.getElementById('btn-eraser')
        let btnClear = document.getElementById('btn-clear')
        let color = document.getElementById('color')

        let isDraw = false
        let strokeWidth = 1
        let isEraser = false
        let colorValue = '#000000'

        btnBold.onclick = () => {
            isEraser = false
            ctx.globalCompositeOperation = 'source-over'
            strokeWidth = 10
            btnBold.classList.add('active')
            btnThin.classList.remove('active')
        }
        btnThin.onclick = () => {
            isEraser = false
            ctx.globalCompositeOperation = 'source-over'
            strokeWidth = 1
            btnThin.classList.add('active')
            btnBold.classList.remove('active')
        }
        btnSave.onclick = () => {
            let dataURL = canvas.toDataURL('image/png')
            let a = document.createElement('a')
            a.href = dataURL
            a.download = '签名.png'
            a.click()
        }
        color.onchange = () => {
            colorValue = color.value
        }

        btnEraser.onclick = () => {
            isEraser = !isEraser
            if (isEraser) {
                btnEraser.classList.add('active')
            } else {
                btnEraser.classList.remove('active')
            }
            ctx.globalCompositeOperation = 'destination-out'
            strokeWidth = 30
        }

        btnClear.onclick = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
        }


        canvas.addEventListener('mousedown', (e) => {
            isDraw = true
            ctx.beginPath()
            let x = e.pageX - canvas.offsetLeft - canvas.offsetLeft
            let y = e.pageY - canvas.offsetTop - canvas.offsetTop
            ctx.moveTo(x, y)
        })

        canvas.addEventListener('mousemove', (e) => {
            if (isDraw) {
                let x = e.pageX - canvas.offsetLeft - canvas.offsetLeft
                let y = e.pageY - canvas.offsetTop - canvas.offsetTop
                ctx.lineTo(x, y)
                ctx.lineWidth = strokeWidth
                ctx.strokeStyle = colorValue
                ctx.stroke()
            }
        })

        canvas.addEventListener('mouseup', () => {
            isDraw = false
            ctx.closePath()
        })
    </script>

</body>

</html>